<template>
  <!-- 二手车详情   到店新车详情-->
  <div class="box newSource" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中"
    element-loading-background="rgba(255, 255, 255, 0.8)">
    <div v-show="!loading">
      <heads></heads>
      <!-- <tools></tools> -->
      <div class="tit">
        <div class="list">
          <div class="li" style="cursor: pointer" @click="() => {
            $router.push('/');
          }
            ">
            <img src="../../assets/logo.png" />
          </div>
          <div v-show="vehicleType != 3" @click.stop="toPush(2, 2)" style="color: #333333; cursor: pointer"
            :class="vehicleType == 2 ? 'acctive' : ''">
            二手车
          </div>

          <div v-show="vehicleType != 3" @click.stop="toPush(2, 1)" style="color: #333333; cursor: pointer"
            :class="vehicleType == 1 ? 'acctive' : ''">
            到店新车
          </div>

          <div class="sousuo">
            <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入关键字开始找车" />
            <p class="el-icon-search" @click="search"></p>
          </div>

          <downloadAppBtn></downloadAppBtn>
        </div>
      </div>
      <div class="particulars">
        <!-- <div class="doorSeen" v-if="doorSeen">
        <div class="doorSeen_title">我要记录</div>
        <div class="doorSeen_center">
          <div class="left">
            <input
              class="left_input"
              v-model="remarks"
              type="text"
              placeholder="上门记录"
            />
            <div class="left_tu">
              <el-upload
                :action="$upLoad"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-success="houseSuccess"
                :on-change="houseChage"
              >
                <div class="zhanshi">
                  <div
                    class="zhanshi_item"
                    v-for="(i, j) in vehicleImage"
                    :key="j"
                    @mouseenter="immigration(i.id)"
                    @mouseleave="shiftOut()"
                  >
                    <video
                      v-if="i.type == 2"
                      :src="i.path"
                      style="height: 150px; width: 150px"
                      controls="controls"
                    >
                      您的浏览器不支持视频播放
                    </video>
                    <img
                      v-else-if="i.type == 1"
                      style="height: 150px; width: 150px"
                      :src="i.path"
                      alt=""
                    />
                    <div
                      class="zhanshi_item_zz"
                      @click.stop=""
                      v-if="yiru == 'yiru' + i.id"
                    >
                      <img
                        @click.stop="houseRemove(i)"
                        src="../../assets/bbcz/del01.png"
                        alt=""
                      />
                    </div>
                  </div>
                  <i
                    v-if="vehicleImage && vehicleImage.length < 9"
                    class="el-icon-plus kg"
                  ></i>
                </div>
              </el-upload>
            </div>
          </div>
          <div class="right">
            <div class="btn_bc" @click="submitSave()">保存</div>
            <div class="btn_qx" @click="doorSeenClick()">取消</div>
          </div>
        </div>
        <div class="doorSeen_title">历史记录
          <div>更多</div>
        </div>
        <div class="doorSeen_center">
          <div class="left" v-if="historyList.length>0">
            <input
              class="left_input"
              v-model="remarks"
              type="text"
              placeholder="上门记录"
            />
            <div class="left_tu">
              <el-upload
                :action="$upLoad"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-success="houseSuccess"
                :on-change="houseChage"
              >
                <div class="zhanshi">
                  <div
                    class="zhanshi_item"
                    v-for="(i, j) in vehicleImage"
                    :key="j"
                    @mouseenter="immigration(i.id)"
                    @mouseleave="shiftOut()"
                  >
                    <video
                      v-if="i.type == 2"
                      :src="i.path"
                      style="height: 150px; width: 150px"
                      controls="controls"
                    >
                      您的浏览器不支持视频播放
                    </video>
                    <img
                      v-else-if="i.type == 1"
                      style="height: 150px; width: 150px"
                      :src="i.path"
                      alt=""
                    />
                    <div
                      class="zhanshi_item_zz"
                      @click.stop=""
                      v-if="yiru == 'yiru' + i.id"
                    >
                      <img
                        @click.stop="houseRemove(i)"
                        src="../../assets/bbcz/del01.png"
                        alt=""
                      />
                    </div>
                  </div>

                </div>
              </el-upload>
            </div>
          </div>
          <div v-if="historyList.length==0" style="height: 450px">
            <el-empty :description="还没有上门记录呢"></el-empty>
          </div>

        </div>
      </div> -->
        <template v-if="doorSeen">
          <bbczDoorSeen :createdId="tHouseInfo.userInfo && tHouseInfo.userInfo.id" @close="doorSeen = false" :businessType="2" :uid="$route.query.id" @updataLook="doorSeenLsjl"></bbczDoorSeen>
        </template>
        <div class="tu">
          <div class="datu" v-if="Img.type != 'video'">
            <el-image style="width: 600px; height: 400px" :preview-src-list="previewList" :src="Img.url" fit="cover" />
            <div class="zuo el-icon-arrow-left" @click="cutImg(0)"></div>
            <div class="you el-icon-arrow-right" @click="cutImg(1)"></div>
          </div>
          <div class="datu" v-else>
            <video controls autoplay muted width="600" height="400" :src="tHouseInfo.vehicleVideo"></video>
          </div>
          <div class="xiaotuTime">
            <div class="xiaotu" @click="buttonPlay(2)">
              <img v-if="Img.type == 'homeImg'" :src="Img.url" />
              <img v-else :src="homeImgList[homeImgList.length - 1]" />
              <p>图片</p>
            </div>
            <div class="xiaotu" v-if="tHouseInfo.vehicleVideo" @click="buttonPlay(1)">
              <video style="object-fit: cover" width="180" height="120" :src="tHouseInfo.vehicleVideo"></video>
              <p>视频</p>
              <img class="videoPlay" src="../../assets/bf.png" />
            </div>
          </div>
        </div>
        <div class="wenz">
          <info-number :infoId="tHouseInfo.id" />
          <div class="qian">
            <div class="qian_top">
              <div class="qian_top_left">
                {{
                  tHouseInfo.vehicleBrandModel &&
                  tHouseInfo.vehicleBrandModel.split("|")[0] +
                  " " +
                  ((tHouseInfo.vehicleBrandModel &&
                    tHouseInfo.vehicleBrandModel.split("|")[1]) ||
                    "")
                }}
                {{ tHouseInfo.model + "/" || "" }}
                {{
                  tHouseInfo.bodyStructureDoors +
                  "门" +
                  tHouseInfo.bodyStructureSeat +
                  "座" +
                  tHouseInfo.bodyStructureVehicle +
                  "车"
                }}
              </div>
              <div class="qian_top_right">
                <div class="qian_top_right_item" @click.stop="collect(tHouseInfo)">
                  <img style="width: 30px; height: 30px" src="../../assets/shou3.png"
                    v-if="tHouseInfo.whetherCollection == '1'" />
                  <img style="width: 30px; height: 30px" src="../../assets/shou2.png" v-else />
                  <div>收藏车源</div>
                </div>
                <div class="qian_top_right_item" @click.stop="goDB(tHouseInfo.id, isDB)">
                  <img style="width: 30px; height: 30px" src="../../assets/duibi.png" />
                  <div v-if="!isDB">加入对比</div>
                  <div v-else>取消对比</div>
                </div>
              </div>
            </div>

            <div class="qian_bottom" v-if="tHouseInfo.vehicleType == 1 || tHouseInfo.vehicleType == 3">
              <div class="qian_bottom_left">
                <div class="qian_bottom_left_item">
                  <span class="qian_span line1">{{ tHouseInfo.model }}</span>
                  <span class="qian_title">车型</span>
                </div>
                <div class="qian_bottom_left_item" style="width: 160px">
                  <span class="qian_span line1">{{
                    tHouseInfo.bodyStructureDoors +
                    "门" +
                    tHouseInfo.bodyStructureSeat +
                    "座" +
                    (tHouseInfo.bodyStructureVehicle &&
                      tHouseInfo.bodyStructureVehicle.indexOf("厢") > -1
                      ? tHouseInfo.bodyStructureVehicle
                      : tHouseInfo.bodyStructureVehicle + "厢")
                  }}</span>
                  <span class="qian_title">车身结构</span>
                </div>
                <div class="qian_bottom_left_item" style="width: 100px; margin-left: 0"
                  v-if="tHouseInfo.vehicleType == 1 && tHouseInfo.displacement">
                  <span class="qian_span line1">{{
                    tHouseInfo.displacement
                  }}</span>
                  <span class="qian_title">排量</span>
                </div>
                <div class="qian_bottom_left_item" style="width: 100px" v-if="tHouseInfo.vehicleType == 3">
                  <span class="qian_span line1">{{
                    tHouseInfo.vehicleClassification
                  }}</span>
                  <span class="qian_title">车辆类型</span>
                </div>
              </div>
              <div class="qian_bottom_right">
                <div class="qian_bottom_right_item" @click="doorSeenClick()">
                  <div style="
                      width: 30px;
                      height: 30px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img style="width: 22px; height: 22px" src="../../assets/bbcz/xqsmkg01.png" />
                  </div>
                  <div v-show="!smkg_chage">上门看看</div>
                  <div v-show="smkg_chage">上门看过</div>
                </div>
                <div class="qian_bottom_right_item" @click="jubaoClick">
                  <img style="width: 30px; height: 30px" src="../../assets/bbcz/xqjb01.png" />
                  <div>举报</div>
                </div>
              </div>
            </div>
            <div class="qian_bottom" v-else-if="tHouseInfo.vehicleType == 2">
              <div class="qian_bottom_left">
                <div class="qian_bottom_left_item" style="width: 100px">
                  <span class="qian_span line1">{{
                    tHouseInfo.vehicleAge
                  }}</span>
                  <span class="qian_title">车龄</span>
                </div>
                <div class="qian_bottom_left_item" style="width: 140px">
                  <span class="qian_span line1">{{
                    tHouseInfo.mileage
                    ? +tHouseInfo.mileage >= 10000
                      ? +(tHouseInfo.mileage / 10000).toFixed(1) + "万公里"
                      : tHouseInfo.mileage + "公里"
                    : ""
                  }}</span>
                  <span class="qian_title">里程</span>
                </div>
                <div class="qian_bottom_left_item" style="margin-left: 0; width: 120px" v-if="tHouseInfo.displacement">
                  <span class="qian_span line1" style="width: 120px">{{
                    tHouseInfo.displacement
                  }}</span>
                  <span class="qian_title">排量</span>
                </div>
              </div>
              <div class="qian_bottom_right">
                <div class="qian_bottom_right_item" @click="doorSeenClick()">
                  <div style="
                      width: 30px;
                      height: 30px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img style="width: 22px; height: 22px" src="../../assets/bbcz/xqsmkg01.png" />
                  </div>
                  <div v-show="!smkg_chage">上门看看</div>
                  <div v-show="smkg_chage">上门看过</div>
                </div>
                <div class="qian_bottom_right_item" @click="jubaoClick">
                  <img style="width: 30px; height: 30px" src="../../assets/bbcz/xqjb01.png" />
                  <div>举报</div>
                </div>
              </div>
            </div>
          </div>
          <div class="jiage line2">
            {{
              tHouseInfo.intervalPrice && tHouseInfo.intervalPrice != ""
              ? tHouseInfo.intervalPrice.indexOf("-") > -1
                ? tHouseInfo.intervalPrice.split("-")[0] +
                "万-" +
                tHouseInfo.intervalPrice.split("-")[1] +
                "万"
                : ""
              : tHouseInfo.price
                ? tHouseInfo.price + "万"
                : ""
            }}
          </div>

          <div class="yhxx">
            <div class="mingpai weigui-wrap">
              <div class="weigui" v-if="weig" @click="weigui">
                <img class="img" src="@/assets/v3/new-weigui.png" />

                <p>该用户有{{ Count }}条违规信息！</p>
                <div>查看详情</div>
              </div>
              <div class="mingpai_item">
                <img class="mingpai_item_img pointer" style="cursor: pointer" :src="userInfo.image
                  ? userInfo.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " @click="toAgent(userInfo)" />
                <span class="mingpai_item_name pointer line1" style="width: 100px; cursor: pointer"
                  @click="toAgent(userInfo)">{{ (userInfo && userInfo.nikeName) || "未命名用户" }}</span>
                <span v-if="userInfo && userInfo.isAgent == 1" class="mingpai_item_sj line1" style="cursor: pointer"
                  @click="shopdetails(tHouseInfo.distributor)">{{
                    tHouseInfo.distributor
                    ? tHouseInfo.distributor.storeName
                    : "个人车源"
                  }}</span>
                <span v-else class="mingpai_item_sj line1" style="cursor: pointer"
                  @click="shopdetails(tHouseInfo.distributor)">个人车源</span>
                <div class="vip-level" :style="{
                  backgroundColor:
                    $store.state.colors[tHouseInfo.userInfo.memberLevel - 1]
                      .bgColor,
                  color:
                    $store.state.colors[tHouseInfo.userInfo.memberLevel - 1]
                      .wordColor,
                  borderColor:
                    $store.state.colors[tHouseInfo.userInfo.memberLevel - 1]
                      .lineColor,
                }">
                  {{
                    $store.state.colors[tHouseInfo.userInfo.memberLevel - 1]
                      .level
                  }}
                </div>
              </div>

              <div class="but">
                <div class="but_2" @click="chat">
                  <img src="@/assets/weixin_b.png" alt />
                  <p>在线聊天</p>
                </div>
                <div class="but_1" @click="mouseoverPhone">
                  <img src="@/assets/dianhua_lan.png" alt />
                  <p>{{ phonestate ? userInfo.phone : "拨打电话" }}</p>
                </div>
              </div>
            </div>

            <div class="saoma">
              <img class="saoma_img" @mouseenter="qrCode && $refs.popoverRef.doShow()"
                @mouseleave="$refs.popoverRef.doClose()" @click.stop="reGetQrCode()" slot="reference" :src="qrCode"
                @error.once="reGetQrCode()" alt="重新获取" v-if="qrCode" />
              <span class="saoma_span">扫码查看小程序内信息</span>
              <el-popover placement="bottom" ref="popoverRef" width="240px" trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <div style="width: 120px;height: 1px;" slot="reference"></div>
                <img style="width:240px;height: 240px;" :src="qrCode" alt="重新获取" />
              </el-popover>
            </div>


          </div>
        </div>

        <div class="xinxi" v-if="tHouseInfo.vehicleType == '1'">
          <div class="fangyuan">基础信息</div>
          <p>
            <span style="color: #999999">车辆品牌：</span>
            <span>{{ tHouseInfo.vehicleBrandModel.split("|")[0] }}</span>
          </p>
          <p>
            <span style="color: #999999">车辆类型：</span>
            <span>{{ tHouseInfo.vehicleClassification }}</span>
          </p>
          <p v-if="tHouseInfo.emissionStandard">
            <span style="color: #999999">排放标准：</span>
            <span>{{ tHouseInfo.emissionStandard }}</span>
          </p>
          <p>
            <span style="color: #999999">变速箱：</span>
            <span>{{ czType22[tHouseInfo.transmissionCase] }}</span>
          </p>
          <p>
            <span style="color: #999999">燃油类型：</span>
            <span>{{ tHouseInfo.fuelType }}</span>
          </p>
          <p>
            <span style="color: #999999">车身颜色：</span>
            <span>{{ tHouseInfo.exteriorColor }}</span>
          </p>
        </div>
        <div class="xinxi" v-else-if="tHouseInfo.vehicleType == '2'">
          <div class="fangyuan">基础信息</div>
          <p>
            <span style="color: #999999">车源地：</span>
            <span>{{ tHouseInfo.remarks }}</span>
          </p>
          <p>
            <span style="color: #999999">车辆类型：</span>
            <span>{{ tHouseInfo.vehicleClassification }}</span>
          </p>
          <p>
            <span style="color: #999999">车身结构：</span>
            <span>{{
              tHouseInfo.bodyStructureDoors +
              "门" +
              tHouseInfo.bodyStructureSeat +
              "座" +
              (tHouseInfo.bodyStructureVehicle &&
                tHouseInfo.bodyStructureVehicle.indexOf("厢") > -1
                ? tHouseInfo.bodyStructureVehicle
                : tHouseInfo.bodyStructureVehicle + "厢")
            }}</span>
          </p>

          <p>
            <span style="color: #999999">燃油类型：</span>
            <span>{{ tHouseInfo.fuelType }}</span>
          </p>
          <p>
            <span style="color: #999999">过户次数：</span>
            <span>{{ tHouseInfo.numberTransfer }}次</span>
          </p>
          <p>
            <span style="color: #999999">上牌时间：</span>
            <span>{{
              tHouseInfo.licensingTimeYear +
              "年" +
              tHouseInfo.licensingTimeMonth +
              "月"
            }}</span>
          </p>

          <p v-if="tHouseInfo.renovation">
            <span style="color: #999999">排放标准：</span>
            <span>{{ tHouseInfo.renovation }}</span>
          </p>
          <p>
            <span style="color: #999999">变速箱：</span>
            <span>{{ czType22[tHouseInfo.transmissionCase] }}</span>
          </p>
          <p>
            <span style="color: #999999">车身颜色：</span>
            <span>{{ tHouseInfo.exteriorColor }}</span>
          </p>

          <p class="wrap">
            <span style="color: #999999">看车地点：</span>
            <span>{{ tHouseInfo.carViewingPlace }}</span>
          </p>
          <p v-if="false">
            <span style="color: #999999">车型：</span>
            <span>{{ tHouseInfo.model }}</span>
          </p>
        </div>
        <div class="xinxi" v-else-if="tHouseInfo.vehicleType == '3'">
          <div class="fangyuan">基础信息</div>

          <p>
            <span style="color: #999999">车辆品牌：</span>
            <span>{{ tHouseInfo.vehicleBrandModel.split("|")[0] }}</span>
          </p>
          <p v-if="tHouseInfo.emissionStandard">
            <span style="color: #999999">排放标准：</span>
            <span>{{ tHouseInfo.emissionStandard || "--" }}</span>
          </p>

          <p>
            <span style="color: #999999">变速箱：</span>
            <span>{{ czType22[tHouseInfo.transmissionCase] }}</span>
          </p>
          <p>
            <span style="color: #999999">燃油类型：</span>
            <span>{{ tHouseInfo.fuelType }}</span>
          </p>

          <p>
            <span style="color: #999999">车身颜色：</span>
            <span>{{ czType22[tHouseInfo.transmissionCase] }}</span>
          </p>
          <p v-if="tHouseInfo.displacement" class="wrap">
            <span style="color: #999999">排量：</span>
            <span class="qian_title">{{ tHouseInfo.displacement }}</span>
          </p>
        </div>

        <div class="jieshao" v-if="tHouseInfo.vehicleType != 1">
          <div class="jies">车况描述</div>
          <div class="li">{{ tHouseInfo.vehicleConditionDescription }}</div>
        </div>
        <div class="jieshaoTu">
          <div class="jies">车辆实拍</div>
          <div :class="[
            index >= 6 ? 'litu3' : index >= 2 ? 'litu2' : 'litu1',
            { mln: index == 0 || index == 2 },
            {
              litu5:
                bottomImgList.length > 0 &&
                (index == 5 ||
                  (bottomImgList.length - 1 == index &&
                    bottomImgList.length <= 6)),
            },
          ]" class="litu" v-for="(item, index) in bottomImgList" :key="item">
            <img :src="item" @click="showImg(index, bottomImgList, [])" style="" />
            <div @click="ckgdImg" class="checkMore">查看更多></div>
          </div>
        </div>
        <div class="kcwz">
          <div class="jies">看车位置</div>
          <div id="containepic" style="width: 1200px; height: 400px"></div>
        </div>
        <p class="mzsm">
          {{ disclaimerContent }}
          <!-- 免责声明：帮帮同城旨在为广大用户提供更丰富的信息，但由于部分信息因时间、政策变化等因素，且信息审核会有滞后性，会导致部分信息更新不同步，与实际情况可能存在偏差，一切信息以发布方官宣为准。帮帮同城不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或任何责任。 -->
        </p>
      </div>
      <floor></floor>
      <xqimgexamine ref="xqimgexamine" :vid="vid" :item="tHouseInfo"></xqimgexamine>
      <czreport ref="czreport" :bUserId="userInfo.id"></czreport>
      <chat ref="chats"></chat>
      <el-dialog title="违规信息" :visible.sync="centerDialogVisible" width="30%" center>
        <div style="height: 500px; overflow-y: scroll">
          <div class="informationMessage" v-for="(i, j) in informationList" :key="j">
            <div style="color: #aaa">
              举报车源：<span style="color: #000">{{ i.title }}</span>
            </div>
            <div style="color: #aaa">
              举报原因：<span style="color: #000">{{
                i.reportType + "(" + i.reportContent + ")"
              }}</span>
            </div>
            <div style="color: #aaa">
              举报时间：<span style="color: #000">{{ i.createDate }}</span>
            </div>
            <div style="color: #aaa">
              举报图片：
              <div>
                <el-image style="width: 100px; height: 100px" :src="item" fit="contain" :preview-src-list="i.image"
                  v-for="(item, index) in i.image" :key="index"></el-image>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <inform ref="inform" :bUserId="bUserId" :businessType="businessType"></inform>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import czreport from "../../components/bbcz/czreport.vue";
import collect from "../../components/collect.vue";
import chat from "../../components/chat.vue";
// import tools from "../../components/tools.vue";
import xqimgexamine from "../../components/bbcz/xqimgexamine.vue";
import bbczDoorSeen from "../index/comp/bbcz-door-seen.vue";
import inform from "./inform";
export default {
  components: {
    floor,
    heads,
    czreport,
    collect,
    chat,
    // tools,
    xqimgexamine,
    bbczDoorSeen,
    inform,
  },
  data() {
    return {
      loading: true,
      isShowPhone: false,

      vid: this.$route.query.id,
      chatid: "",
      checkedCities: [],
      tHouseInfo: {},
      userInfo: {},
      homeImgList: [],
      houseImgList: [],
      bottomImgList: [],
      Img: { type: "", url: "" },
      ImgList: [],
      thisImg: 0,
      videostate: false,
      isCollection: 0,
      phonestate: false,
      searchtext: "",
      previewList: [],
      housetype: 1,
      limit: "",
      limit1: "",
      weig: false,
      Count: "",
      centerDialogVisible: false,
      informationList: [],
      doorSeen: false,
      vehicleImage: [],
      dialogImageUrl: "",
      dialogVisible: false,
      yiru: "",
      olds: "",
      czType4: {}, //车辆类型
      czType5: {}, //燃油类型
      czType6: {}, //排放标准
      czType7: {}, //车型
      czType8: {}, // 价格
      czType9: {}, // 车龄
      czType22: {}, // 变速箱
      isDB: false,
      qrCode: "",
      bUserId: "",
      businessType: "",
      vehicleType: "",
      indexs: "1",
      // 判断上门看看还是上门看过
      smkg_chage: false,
    };
  },
  created() {
    console.log("previewList", this.previewList);
    // this.olds = this.    type
    this.olds = this.$route.query.type ? this.$route.query.type : -1;
    this.id = this.$route.query.id;
    this.init();
    //回到顶部
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    scrollBy(0, -top);
  },
  mounted() {
    this.doorSeenLsjl();
  },
  watch: {
    "$route.query.id": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.init();
        }
        //判断newVal有没有值监听路由变化
      },
    },
  },
  methods: {
			// 获取上门看过历史记录
    doorSeenLsjl(){
      let user = JSON.parse(localStorage.getItem("userInfo"));
      this.$getHttp("api/mobile/vehicleOwner/queryVisitedHistory", {
          userId: user.id,
          vehicleId:this.$route.query.id,
          businessType: 2,
      }).then(res => {
        if(res.visitedHistory.id){
          // 判断是上门看看还是看过
          this.smkg_chage=true
        }
      });
    },
    reGetQrCode() {
      // console.log('reGetQrCode');
      var url;
      if (this.vehicleType != 3) {
        url = "pages_owner/index/vehicleDetails";
      } else if (this.vehicleType == 3) {
        url = "pages_owner/index/carSeriesDetails";
      }

      this.$postHttp("/api/mobile/public/generateAppletQRCode", {
        id: this.$route.query.id,
        url,
      }).then((data) => {
        console.log(data);
        this.qrCode = data.imagePath;
        // console.log(data.imagePath);
      });
    },
    showPhone() {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return false;
      }
      // console.log(this.userInfo)

      this.insertCallRecord({
        userId: this.id,
        phone: this.userInfo.phone,
        businessType: 2,
        callType: 5,
      });
      this.isShowPhone = !this.isShowPhone;
    },
    submitSave() {
      if (this.remarks.trim() == "") {
        this.$message({
          message: "请填写上门记录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      var recordPicture = [];
      var recordVideo = [];
      this.vehicleImage.map((item) => {
        if (item.type == 2) {
          recordVideo.push(item.path);
        } else {
          recordPicture.push(item.path);
        }
      });

      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.$postHttp("/api/mobile/vehicleOwner/releaseVisited", {
          noteTaker: user.id,
          recordVehicle: this.$route.query.id,
          recordDescription: this.remarks,
          recordPicture: recordPicture.join("|"),
          recordVideo: recordVideo.join("|"),
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "提交成功！",
              type: "error",
              offset: 120,
              duration: 2000,
            });
            this.doorSeenClick();
          }
        });
      }
    },
    // 获取字段参数
    async getType(type) {
      var obj = await this.$getHttp(
        "/api/mobile/vehicleOwner/queryDataDictionaryList",
        {
          ...this.dictParam,
          type: type,
        }
      );
      return obj.dataDictionaryList;
    },
    // 判断是否有违规
    getCount(id) {
      let that = this;
      this.$getHttp("/mob/user/getReportMyRecord", {
        userId: id,
        businessType: 2,
      }).then((res) => {
        this.Count = res.page.count;
        if (this.Count > 0) {
          that.weig = true;
          setTimeout(() => {
            that.weig = false;
          }, 3000);
        }
      });
    },

    doorSeenClick() {
      if (!this.loginstate) {
        this.myErrorMessage("请先登录！");
      } else {
        this.doorSeen = !this.doorSeen;
      }
    },
    ckgdImg() {
      this.$refs.xqimgexamine.open();
    },
    weigui() {
      // this.reportInformation();
      // this.centerDialogVisible = true;
      this.bUserId = this.userInfo.id;
      this.businessType = this.userInfo.businessType;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);
    },
    immigration(id) {
      this.yiru = "yiru" + id;
    },
    shiftOut() {
      this.yiru = "";
    },
    // 判断文件格式
    houseChage(file, fileLists) {
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = ["jpg", "png", "jpeg", "gif"]; //限制的文件类型，根据情况自己定义
      // 1为图片，2为视频
      if (suffixArray.indexOf(suffix.toLowerCase()) == -1) {
        this.typegs = 2;
      } else {
        this.typegs = 1;
      }
    },

    beforeUpload(file, fileList) {
      if (file.size / (1024 * 1024) > 20) {
        // 限制文件大小
        this.$message.warning(`当前限制文件大小不能大于20M`);
        return false;
      }
      let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
      let suffixArray = [
        "jpg",
        "png",
        "jpeg",
        "gif",
        "mp4",
        "flv",
        "avi",
        "mpg",
        "wmv",
        "3gp",
        "mov",
        "asf",
        "asx",
        "vob",
        "wmv9",
        "rm",
        "rmvb",
      ]; //限制的文件类型，根据情况自己定义
      if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
        this.$message({
          message: "文件格式错误",
          type: "error",
          duration: 2000,
        });
        return false;
      }
      return true;
    },
    houseSuccess(response, file, fileList) {
      this.vehicleImage.push({
        id: file.uid,
        path: response.data[0].url,
        type: this.typegs,
      });
      console.log(this.vehicleImage);
    },
    houseRemove(file, fileList) {
      for (var i = 0; i < this.vehicleImage.length; i++) {
        if (this.vehicleImage[i].id == file.id) {
          this.vehicleImage.splice(i, 1);
        }
      }
    },
    // 获取举报信息
    reportInformation() {
      this.$getHttp("/mob/user/getReportMyRecord", {
        pageSize: 1000,
        pageNo: 1,
        userId: this.userInfo.id,
      }).then((res) => {
        res.page.list.forEach((el) => {
          if (el.image) {
            el.image = el.image.split("|");
          }
        });
        this.informationList = res.page.list;
        // this.informationTatol = res.page.count
      });
    },
    showImg(index, ImgList, ImgList2) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: [...ImgList, ...ImgList2],
      });
    },
    arrToObj(source, targetObj) {
      targetObj[source.valueNum] = source.valueName;
    },
    async init() {
      this.getUser();
      var czType = await this.getType("4,5,6,7,8,9");
      czType.map((item) => {
        if (item.type == "4") this.arrToObj(item, this.czType4);
        if (item.type == "5") this.arrToObj(item, this.czType5);
        if (item.type == "6") this.arrToObj(item, this.czType6);
        if (item.type == "7") this.arrToObj(item, this.czType7);
        if (item.type == "8") this.arrToObj(item, this.czType8);
        if (item.type == "9") this.arrToObj(item, this.czType9);
      });
      this.czType22 = {
        1: "自动",
        2: "手动",
      };

      this.getHouseInfoDetail(this.$route.query.id);
    },
    initMap() {
      var that = this;
      console.log("that.tHouseInfo.distributor", that.tHouseInfo.distributor);
      // if(!that.tHouseInfo.distributor){
      //   return
      // }

      var center = new qq.maps.LatLng(
        that.tHouseInfo.latitude ||
        (that.tHouseInfo.distributor
          ? that.tHouseInfo.distributor.latitude
          : ""),
        that.tHouseInfo.longitude ||
        (that.tHouseInfo.distributor
          ? that.tHouseInfo.distributor.longitude
          : "")
      );
      setTimeout(() => {
        var map = new qq.maps.Map(document.getElementById("containepic"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        //that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        });
      }, 100);
    },
    goDB(id, flag) {
      //数据没加载

      if (!id) return;
      if (!this.loginstate) {
        this.$message({
          message: "请登录之后在对比！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }

      if (flag) {
        // 去取消
        let contrastIdList = JSON.parse(
          localStorage.getItem("contrastIdList-cz")
        );
        for (var i = 0; i < contrastIdList.length; i++) {
          if (contrastIdList[i] == id) {
            contrastIdList.splice(i, 1);
          }
        }
        localStorage.setItem(
          "contrastIdList-cz",
          JSON.stringify(contrastIdList)
        );
      } else {
        // 去对比
        let contrastIdList = JSON.parse(
          localStorage.getItem("contrastIdList-cz")
        );
        if (contrastIdList && contrastIdList.length >= 4) {
          this.$message({
            message: "最多4辆进行对比",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (contrastIdList == null) {
          let list = [id];
          localStorage.setItem("contrastIdList-cz", JSON.stringify(list));
        } else {
          contrastIdList.push(id);
          localStorage.setItem(
            "contrastIdList-cz",
            JSON.stringify(contrastIdList)
          );
        }
      }
      this.isDB = !flag;
      this.$message({
        message: this.isDB ? "已加入对比！" : "已取消对比！",
        type: this.isDB ? "success" : "error",
        offset: 120,
        duration: 2000,
      });
    },
    //判断用户是否登录，如果登录则查询是否收藏
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
          browseRecordId: this.id,
          viewersId: user.id,
          businessType: 2,
          browsingRecords: 5,
        }).then((res) => { });
        // this.$getHttp("/mob/user/getIsCollection", {
        //   userId: user.id,
        //   cbType: 1,
        //   type: 1,
        //   relationId: this.$route.query.id,
        // }).then((data) => {
        //   if (data.code == 200) {
        //     this.isCollection = data.isCollection;
        //   }
        // });
        // this.$postHttp("/mob/user/saveUserCollection", {
        //   userId: user.id,
        //   type: 2,
        //   cbType: 1,
        //   relationId: this.$route.query.id,
        // }).then((data) => {});
      } else {
        this.loginstate = false;
      }
    },
    getHouseInfoDetail(id) {
      this.$getHttp("/api/mobile/vehicleOwner/queryVehicleInformationById", {
        vehicleId: id,
        userId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : "",
      }).then((data) => {
        if (data.code == 200) {
          this.getCount(data.vehicleInformation.userInfo.id);
          // if (!data.vehicleInformation.hasOwnProperty("shopName")) {
          //   data.vehicleInformation.shopName = "个人房源";
          // }
          this.vehicleType = data.vehicleInformation.vehicleType;
          const contrastIdList = JSON.parse(
            localStorage.getItem("contrastIdList-cz")
          );
          contrastIdList &&
            contrastIdList.forEach((el) => {
              if (el == data.vehicleInformation.id) {
                this.isDB = true;
              }
            });

          // 初始化
          this.previewList = [];
          this.ImgList = [];
          // 外层
          // vehiclePictures//车辆图片（车系独有）
          // vehicleVideo//车辆视频
          // vehicleCoverPicture//车辆封面图片
          // // 2：车身外观；3：仪表中控；4：车厢座椅
          // bodyAppearance//车身外观
          // instrumentCentralControl//仪表中控
          // carSeat//车厢座椅
          if (data.vehicleInformation == "") return;

          this.homeImgList = this.manageImg(
            data.vehicleInformation.vehicleCoverPicture
          );

          this.manageImg(data.vehicleInformation.vehicleCoverPicture).forEach(
            (e) => {
              this.previewList.push(e);
              this.ImgList.push({
                type: "homeImg",
                url: e,
              });
            }
          );
          this.manageImg(data.vehicleInformation.bodyAppearance).forEach(
            (e) => {
              this.previewList.push(e);
              this.ImgList.push({
                type: "homeImg",
                url: e,
              });
            }
          );
          this.manageImg(
            data.vehicleInformation.instrumentCentralControl
          ).forEach((e) => {
            this.previewList.push(e);
            this.ImgList.push({
              type: "homeImg",
              url: e,
            });
          });
          this.manageImg(data.vehicleInformation.carSeat).forEach((e) => {
            this.previewList.push(e);
            this.ImgList.push({
              type: "homeImg",
              url: e,
            });
          });

          //   this.manageImg(data.tHouseInfo.houseTypeImage).forEach((e) => {
          //     this.previewList.push(e);
          //     this.ImgList.push({
          //       type: "houseImgList",
          //       url: this.$img + e,
          //     });
          //     this.houseImgList = this.manageImg(
          //       data.tHouseInfo.houseTypeImage
          //     );
          //   });
          // 下部图片
          this.manageImg(data.vehicleInformation.bodyAppearance).map((i, j) =>
            this.bottomImgList.push(i)
          );
          this.manageImg(data.vehicleInformation.instrumentCentralControl).map(
            (i, j) => this.bottomImgList.push(i)
          );
          this.manageImg(data.vehicleInformation.carSeat).map((i, j) =>
            this.bottomImgList.push(i)
          );

          this.Img = this.ImgList[0];
          this.tHouseInfo = data.vehicleInformation;
          this.userInfo = data.vehicleInformation.userInfo;
          this.initMap();
          console.log("thisImgImgImgImg", this.Img);

          setTimeout(() => {
            this.loading = false;
          }, 100);

          var url;
          if (data.vehicleInformation.vehicleType != 3) {
            url = "pages_owner/index/vehicleDetails";
          } else if (data.vehicleInformation.vehicleType == 3) {
            url = "pages_owner/index/carSeriesDetails";
          }
          if (this.qrCode == "") {
            this.$postHttp("/api/mobile/public/generateAppletQRCode", {
              id,
              url,
            }).then((data) => {
              console.log(data);
              this.qrCode = data.imagePath;
              // console.log(data.imagePath);
            });
          }

          if (this.tHouseInfo.vehicleType == 3) {
            this.getDisclaimers(9);
          } else {
            this.getDisclaimers(8);
          }
        }
      });
    },

    toAgent(userInfo) {
      // if (userInfo && userInfo.isAgent == 0) {
      //   this.openUrl({
      //     path: "/index/userDetail",
      //     query: {
      //       id: userInfo.id
      //     }
      //   });
      //   return;
      // }
      if (userInfo && userInfo.id) {
        this.openUrl({
          path: "/index/goldConsultant",
          query: {
            id: userInfo.id,
          },
        });
      }
    },
    //开启聊天
    chat() {
      console.log(this.loginstate);
      if (this.loginstate) {
        console.log(this.userInfo.id, this.tHouseInfo.id);
        // return
        // this.$refs.chats.chatOpne(this.userInfo.id, this.tHouseInfo.id);
        this.chatcz(
          this.tHouseInfo.userInfo.id,
          this.tHouseInfo.id,
          2,
          this.indexs
        );
        if (this.indexs == 1) {
          this.indexs = 2;
        }
      } else {
        this.$message({
          message: "请登录之后在聊天！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    mouseoverPhone() {
      if (this.loginstate) {
        this.phonestate = !this.phonestate;
        this.phonestate && this.insertCallRecord({
          userId: this.id,
          phone: this.userInfo.phone,
          businessType: 2,
          callType: 5,
        });
      } else {
        this.$message({
          message: "请登录之后在查看电话！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    //处理楼层信息
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋共" + fool[1] + "层";
    },
    floortr(a) {
      if (a < 4) {
        return "底层";
      } else if (a > 3 && a < 7) {
        return "多层";
      } else if (a > 6 && a < 11) {
        return "小高层";
      } else if (a > 10 && a < 31) {
        return "高层";
      } else if (a > 30) {
        return "超高层";
      }
    },
    search() {
      this.openUrl({
        path: "/index/newSource",
        query: {
          search: this.searchtext,
          newOld: 1,
        },
      });
    },
    //跳转
    toPush(type, old) {
      this.openUrl({
        path: "/index/newSource",
        query: {
          transactionType: type,
          newOld: old,
        },
      });
      return;
      if (type == 2) {
        this.openUrl({
          path: "/index/newHouse",
          query: {
            transactionType: type,
            newOld: old,
          },
        });
      } else if (type == 1) {
        this.openUrl({
          path: "/index/lease",
          query: {
            transactionType: type,
          },
        });
      }
    },
    jubaoClick() {
      this.$refs.czreport.jubaoGuan(this.$route.query.id);
    },

    //切换图片
    cutImg(type) {
      if (type == 0) {
        if (this.thisImg > 0) {
          this.Img = this.ImgList[this.thisImg - 1];
          this.thisImg = this.thisImg - 1;
        } else {
          this.$message({
            message: "已经是第一张了哦！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      } else {
        if (
          this.thisImg < this.ImgList.length &&
          this.ImgList.length - this.thisImg > 1
        ) {
          this.Img = this.ImgList[this.thisImg + 1];
          this.thisImg = this.thisImg + 1;
        } else {
          this.$message({
            message: "已经是最后一张了哦！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      }
    },
    //点击播放小图
    buttonPlay(type) {
      if (type == 1) {
        this.Img = {
          type: "video",
        };
      } else if (type == 2) {
        this.Img = this.ImgList[0];
        this.thisImg = 0;
      } else if (type == 3) {
        this.Img = this.ImgList[this.homeImgList.length];
        this.thisImg = this.homeImgList.length;
      }
    },

    shopdetails(item) {
      if (item && item.id) {
        this.openUrl({
          path: "/index/newDealerDetails",
          query: {
            id: item.id,
          },
        });
      } else {
        this.$message({
          message: "个人车源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    // 关注
    collect(item, flag) {
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: "4",
            relationId: item.id,
            id:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : "",
          }
        ).then((data) => {
          if (data.code == 200) {
            this.getHouseInfoDetail(item.id);
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000,
            });
            if (item.whetherCollection == 0) {
              this.addIntegral(5, "收藏车源");
            }
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏个人！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
// .saoma {
//   position: absolute;
//   right: 0;
//   top: 520px;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   .saoma_img {
//     width: 90px;
//     height: 90px;
//     margin-bottom: 6px;
//   }
//   .saoma_span {
//     font-size: 12px;
//     font-weight: 400;
//     color: #333333;
//   }
// }
// 车辆实拍
.mln {
  margin-left: 0 !important;
}

.litu {
  overflow: hidden;
  background: #999999;
  position: relative;
  display: inline-block;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.litu5 {
  color: #000000;

  &::after {
    content: "";
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  & .checkMore {
    display: block !important;
  }
}

.litu3 {
  display: none !important;
  margin-bottom: 30px;
  margin-left: 30px;
}

.litu2 {
  width: 277px;
  height: 171px;
  margin-bottom: 30px;
  margin-left: 30px;
}

.litu1 {
  width: 585px;
  height: 290px;
  margin-bottom: 30px;
  margin-left: 30px;
}

.checkMore {
  z-index: 2;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  cursor: pointer;
  font-weight: 400;
  color: #ffffff;
  line-height: 33px;
}

.acctive {
  color: #64b6a8 !important;

  font-size: 24px !important;
  line-height: 1;
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #64b6a8;
    position: absolute;
    bottom: -12px;
    left: 0;
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
  overflow: hidden;
}

.informationMessage {
  border: 1px solid #aaa;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.mzsm {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
  width: 97%;
  margin-top: 15px;
  margin-bottom: 30px;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.particulars {
  position: relative;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 93px;

  .doorSeen {
    margin-bottom: 40px;

    .doorSeen_title {
      font-size: 24px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .doorSeen_center {
      box-sizing: border-box;
      width: 1200px;
      // height: 262px;
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      padding: 27px;
      display: flex;

      .left {
        width: 1000px;

        .left_input {
          width: 100%;
          height: 58px;
          border-bottom: 1px solid #e0e0e0;
          color: #999;
        }

        .left_tu {
          margin-top: 10px;

          .zhanshi {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .zhanshi_item {
              width: 150px;
              height: 150px;
              position: relative;
              margin-right: 20px;
              margin-bottom: 10px;
              transition: all 0.5s;

              .zhanshi_item_zz {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.7);
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  width: 30px;
                  height: 30px;
                }
              }
            }
          }

          .kg {
            width: 150px;
            height: 150px;
            border: 1px solid #e0e0e0;
            text-align: center;
            line-height: 150px;
          }
        }
      }

      .right {
        flex: 1;
        display: flex;
        align-items: flex-end;

        // justify-content: flex-end;
        .btn_bc {
          width: 80px;
          height: 50px;
          background-color: #64b6a8;
          border-radius: 6px;
          color: #fff;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
          margin-right: 10px;
        }

        .btn_qx {
          width: 80px;
          height: 50px;
          border: 1px solid #64b6a8;
          border-radius: 6px;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
        }
      }
    }
  }

  .name {
    font-size: 28px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 21px;
  }

  .jubao {
    position: absolute;
    top: -10px;
    right: 20px;
    display: inline-block;
    margin-right: 28px;
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
    }
  }

  .tu {
    display: inline-block;
    vertical-align: top;

    .datu {
      position: relative;
      width: 600px;
      height: 400px;

      img {
        width: 600px;
        height: 400px;
      }

      .zuo {
        position: absolute;
        color: #fff;
        width: 40px;
        height: 40px;
        top: 180px;
        left: 24px;
        background-color: rgba(51, 51, 51, 0.27);
        border-radius: 50%;
        cursor: pointer;
      }

      /deep/.el-icon-arrow-left:before {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 30px;
      }

      .you {
        position: absolute;
        color: #fff;
        width: 40px;
        height: 40px;
        top: 180px;
        right: 24px;
        background-color: rgba(51, 51, 51, 0.27);
        border-radius: 50%;
        cursor: pointer;
      }

      /deep/.el-icon-arrow-right:before {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 30px;
      }
    }

    .xiaotuTime {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .xiaotu {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-top: 24px;
        width: 284px;
        height: 120px;
        cursor: pointer;
        text-align: center;

        img {
          width: 284px;
          height: 120px;
          object-fit: contain;
          cursor: pointer;
          background-color: #00000033;
          /* height: 100%; */
        }

        p {
          width: 60px;
          height: 28px;
          background-color: rgba(51, 51, 51, 0.7);
          position: absolute;
          bottom: 0;
          left: 0;
          color: #fff;
          text-align: center;
          line-height: 28px;
        }

        .tuXuan {
          background-color: #64b6a8;
        }

        .videoPlay {
          width: 35px;
          height: 35px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }

  .wenz {
    position: relative;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 540px;
    background: #ffffff;
    margin-left: 55px;
    padding: 32px 10px 0 20px;
    border: 1px solid #e0e0e0;

    .qian {
      padding-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .qian_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        .qian_top_left {
          font-size: 28px;
          font-weight: 600;
          color: #333333;
        }

        .qian_top_right {
          display: flex;
          align-items: center;

          .qian_top_right_item {
            cursor: pointer;
            width: 50px;
            height: 45px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
          }

          .qian_top_right_item:nth-child(1) {
            margin-right: 24px;
          }
        }
      }

      .qian_bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .qian_bottom_left {
          display: flex;
          align-items: center;

          .qian_bottom_left_item {
            display: flex;
            flex-direction: column;
            // margin-right: 30px;
            width: 100px;
            box-sizing: border-box;

            .qian_span {
              font-size: 18px;
              font-weight: 550;
              color: #333333;
            }

            .qian_title {
              font-size: 16px;
              font-weight: 400;
              color: #666666;
            }
          }
        }

        .qian_bottom_right {
          display: flex;
          align-items: center;

          .qian_bottom_right_item {
            width: 50px;
            height: 45px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            cursor: pointer;
          }

          .qian_bottom_right_item:nth-child(1) {
            margin-right: 24px;
          }
        }
      }
    }

    .jiage {
      height: 140px;
      display: flex;
      align-items: center;
      font-size: 32px;
      font-weight: 600;
      color: #e00000;
      border-bottom: 1px solid #e0e0e0;
    }

    .yhxx {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 36px 0 43px 6px;

      .mingpai {
        position: relative;
        display: flex;
        flex-direction: column;

        // align-items: center;
        .weigui {
          position: absolute;
          padding: 0px 10px 0px 10px;
          width: 300px;
          left: 7px;
          bottom: 131px;

          .img {
            width: 100%;
            height: 134rpx;
          }

          p {
            position: absolute;
            left: 50px;
            bottom: 26px;
            font-size: 16px;
            color: #fff;
          }
        }

        .mingpai_item {
          display: flex;
          align-items: center;

          .mingpai_item_img {
            width: 48px;
            height: 48px;
            border-radius: 48px;
          }

          .mingpai_item_name {
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            margin-left: 14px;
            margin-right: 14px;
          }

          .mingpai_item_sj {
            height: 24px;
            background-color: #ffffff;
            border-radius: 4px;
            border: 1px solid #64b6a8;
            font-size: 14px;
            font-weight: 400;
            color: #64b6a8;
            padding: 2px 5px;
            line-height: 24px;
            margin-right: 14px;
            max-width: 100px;
          }
        }

        .lxfs {
          display: flex;
          padding-left: 62px;
          margin-top: 17px;

          .lxfs-item {
            position: relative;

            .lxfs-item-phone {
              position: absolute;
              bottom: o;
              left: 50%;
              transform: translateX(-50%);
            }
          }

          img {
            cursor: pointer;
            width: 33px;
            height: 33px;
          }
        }
      }

      .saoma {
        display: flex;
        flex-direction: column;
        align-items: center;

        .saoma_img {
          width: 90px;
          height: 90px;
          margin-bottom: 6px;
        }

        .saoma_span {
          font-size: 12px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .xinxi {
    margin-top: 70px;
    width: 1200px;

    .fangyuan {
      font-size: 24px;
      color: #333333;
      margin-bottom: 18px;
    }

    p {
      display: inline-block;
      margin-bottom: 15px;
      width: 420px;
      font-size: 20px;

      &.wrap {
        white-space: nowrap;
        width: 100%;
      }
    }

    .guig {
      display: inline-block;

      p {
        display: inline-block;
        margin-bottom: 15px;
        width: 420px;
        font-size: 20px;

        &.wrap {
          white-space: nowrap;
          width: 100%;
        }
      }
    }
  }

  .jieshao {
    margin-top: 40px;
    margin-bottom: 48px;

    .jies {
      font-size: 24px;
      color: #000000;
      margin-bottom: 17px;
    }

    .li {
      margin-bottom: 8px;
      font-size: 20px;
    }
  }

  .jieshaoTu {
    margin-top: 40px;
    margin-bottom: 48px;

    .jies {
      font-size: 24px;
      color: #000000;
      margin-bottom: 17px;
    }

    div {
      border-radius: 6px;
      overflow: hidden;
    }
  }

  .kcwz {
    margin-top: 40px;
    margin-bottom: 48px;

    .jies {
      font-size: 24px;
      color: #000000;
      margin-bottom: 17px;
    }
  }
}

.tit {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
					height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      width: 400px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      vertical-align: middle;

      input {
        width: 320px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }
  }
}

.but {
  margin-top: 32px;

  div {
    position: relative;
    display: inline-block;
    //width: 153px;
    height: 51px;
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
    line-height: 51px;
    text-indent: 50px;
    color: #fff;
    margin-right: 15px;

    img {
      position: absolute;
      width: 33px;
      height: 33px;
      top: 9px;
      left: 25px;
    }
  }

  p {
    margin-left: 10px;
  }

  .but_1 {
    cursor: pointer;
    padding-right: 20px;
    background: rgba(100, 182, 168, 0.14);
    color: #64b6a8;
  }

  .but_2 {
    cursor: pointer;
    padding-right: 20px;
    background: #64b6a8;
  }
}

.vip-level {
  width: 80px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid;
  border-radius: 4px 4px 4px 4px;
}
</style>
